<template>
	<view>
		
			<view class="empty-cart" v-if="cart && cart.length <= 0">
						<image src="../../static/cart_empty@2x.png" mode=""></image>
						<view class="" style="text-align: center;">
									空空如也～
						</view>
			</view>
		
		
			<scroll-view  v-else scroll-y="true"  :style="{'height': wh +'px'}">		
	
					<view >
								<!-- 收货地址 -->
								<Address :address="address" @goAddress="goAddress"></Address>
								
								<!-- 分界线 -->
								<view class="line">
												<image src="../../static/cart_border@2x.png" mode=""></image>
								</view>
								
								<!-- 商品 -->
								<view class="goods" >
												<!-- 购物车标志 -->
												<view class="goods-title">
															<image src="../../static/shop.png" mode=""></image>购物车
												</view>
												
												<!-- 商品 -->											
												 <view class="goods-body" v-for="(item,index) in cart" :key="item.goods_id">
													 <uni-swipe-action>
															<uni-swipe-action-item  :right-options="options" @click="moveOnClick(item)">
																	<view class="goods-body-item">
																					<view class="goods-body-left">
																								<view class="radio">
																										<radio :checked="item.goods_state" @click="checkHandler(item)" color="#C00000"></radio>
																								</view>
																								<image :src="item.goods_small_logo" mode=""></image>
																					</view>
																					
																					<view class="goods-body-right">
																								<view class="title">
																										{{item.goods_name}}
																								</view>
																								<view class="body">
																												<view class="price">
																															¥{{item.goods_price.toFixed(2)}}
																												</view>
																												<view class="count">
																																<view class="button1">
																																		<button @click="subGoodsCount(item)"  style="color: #bec2cc;">-</button>
																																</view>
																																	<input class="input" @blur="inputCount"  :data-item="item" type="number" :value="item.goods_count" />
																																<view class="button">
																																		<button @click="addGoodsCount(item)">+</button>
																																</view>
																												</view>
																								</view>
																					</view>
																	</view>
															</uni-swipe-action-item>
															</uni-swipe-action>
												</view>
												
								</view>
								
								<!-- 结算 -->
								<Settle :cartList="cart"></Settle>
					</view>

			</scroll-view>
		
		
	</view>
</template>

<script>
	import Address from '@/components/address/address.vue'
	import Settle from '@/components/settle/settle.vue'
	import badgeMix from '@/mixins/tabber-badge.js'
	import { mapGetters ,mapMutations ,mapState } from 'vuex'
	export default {
		components:{ 
					Address,	
					Settle
			},
		mixins:[badgeMix],
		data() {
			return { 
				options:[
					{
								text: '删除',
								style: { backgroundColor: '#b02418;' }
					}
				],
				wh:0,
				checkd:false,
				// cart:[]
			}
		},
	  computed:{ 
				...mapState('user',['address']) ,
				...mapState('cart',['cart','allChecked']) ,
		},

		onLoad(){
					
					//计算可用屏幕高度
					const res = uni.getSystemInfo({
							success:(res=>{
									this.wh = res.windowHeight - 54
							})
					})	
					
					this.isAllChecked()
					
		},
		onShow(){
				// this.getCarlist()
		},
		methods:{
			...mapMutations('user',['setAddress']),
			...mapMutations('cart',['updateCartLsit','changeAllChecked']),
			/**
			* 加载页面后判断是否全选
			*/
			isAllChecked(){
						const singleFlase = this.cart.find(item=>item.goods_state === false)
						if(singleFlase){
							this.changeAllChecked(false)
						}else{
								this.changeAllChecked(true)
						}
						this.updateCartLsit(this.cart)
			},
			/**
			 * 单选
			 */
			checkHandler(goods){
						const obj = this.cart.find(item=>item.goods_id === goods.goods_id )
						obj.goods_state = !obj.goods_state
						this.isAllChecked()
			},
			/**
			 * 滑动点击删除
			 * @param {Object} item
			 */
			moveOnClick(goods){
							const index = this.cart.indexOf(goods)
							this.cart.splice(index,1)
							this.updateCartLsit(this.cart)
			},
			/**
			 * 手动输入商品数量
			* @param {Object} e
			*/
			inputCount(e){
				if(!/^[1-9][0-9]?$/.test(e.detail.value ) ){
								uni.$showMsg('请输入正确数值')
							return
							
				}
				//持久化修改商品的数量
				const goodsId = e.target.dataset.item.goods_id
				
				this.cart.forEach(item=>{
							if(item.goods_id === goodsId){
									return item.goods_count = Number(e.detail.value)
									
							}
				})
				this.updateCartLsit(this.cart)
			},
			/**
			 * 加商品数量
			 * @param {Object} item
			 */
			addGoodsCount(item){
						if(item.goods_count <= 99){
									item.goods_count++
						}
						this.updateCartLsit(this.cart)
			},
	/**
	 * 减商品数量
	 * @param {Object} step 
	 */
			subGoodsCount(item){
				if(item.goods_count > 1){
							item.goods_count--
				}
				this.updateCartLsit(this.cart)
			},
			/**
			 * 跳转uni原生地址对象
			 */
			goAddress(){
					this.getAddress()
			},
			/**
			 * 获取收货地址
			 */
			async getAddress(){
					 uni.chooseAddress({
						  success:res=> {
								this.address.userName = res.userName
								this.address.provinceName = res.provinceName
								this.address.cityName = res.cityName
								this.address.countyName = res.countyName
								this.address.detailInfo = res.detailInfo
								this.address.telNumber = res.telNumber					
								this.setAddress(this.address)
						  },
							fail(err){
									this.reAuth()
									console.log('err',err.errMsg)
							}
						})
			}
			
		},

	}
</script>

<style lang="scss">
	.empty-cart{
				display:flex;
				flex-direction:column;
				align-items: center;
				align-items: center;
				margin-top: 340rpx ;
				color: #e0e7ed;
				font-size: 28rpx;
				image{
							width: 200rpx;
							height: 200rpx;
							margin-bottom: 30rpx;
				}
	}

		.line{
			image{
					width: 100%;
					height: 10rpx;
					margin: 20rpx 0;
			}
		}
		.goods{
					
					.goods-title{
						display: flex;
						align-items: center;
						margin: 0 20rpx;
						padding-bottom: 20rpx;
						border-bottom: 1px solid #e0e7ed;
						font-size: 30rpx;
								image{
										width: 40rpx;
										height: 40rpx;
										margin-right: 20rpx;
								}
					}
					.goods-body{
							padding-left:20rpx ;
							.goods-body-item{
										display: flex;
										border-bottom: 1px solid #e0e7ed;
										padding-bottom: 20rpx;
										padding-top: 20rpx;
							}
							.goods-body-left{
										display: flex;
										.radio{
											display: flex;
											align-items: center;
										}
										image{
												width: 200rpx;
												height: 200rpx;
												margin-right: 10rpx;
										}
							}
							.goods-body-right{
												width: 440rpx;
												font-size: 30rpx;
												.title{
														font-size: 28rpx;
														height: 80rpx;
														overflow: hidden;
														text-overflow:ellipsis; 
														-webkit-line-clamp:2;
														display:-webkit-box;
														-webkit-box-orient:vertical;
												}
												.body{
													margin-top: 50rpx;
													display: flex;
													justify-content: space-between;
												.price{
															font-size: 36rpx;
															color: #b02418;
															line-height: 74rpx;
													}
													.count{
															display: flex;
															justify-content: space-between;
															align-items: center;
															border: 1px solid #e0e7ed;
															border-radius: 7rpx;
															height: 70rpx;
															width: 240rpx;
															button{
																			display: flex;
																			align-items: center;
																			width: 80rpx;
																			height: 70rpx;
																			border-radius:0;
															}
															button::after {
																	border: none;
															}
															.input{
																	text-align: center;
															}
													}
										}
							}
							
					}	
		}
		

</style>
